import React from 'react';
class LifeCpt extends React.Component{
  constructor(props){
    super(props);
    this.state={
        count:0
    }
    alert("construstor 构造函数被调用")
  }


  static getDerivedStateFromProps(nexProps,prevState){
      console.log('getDerivedStateFromProps,nextProps= ',nexProps);
      console.log('getDerivedStateFromProps,prevState= ',prevState);
      alert('getDerivedStateFromProps');
       return prevState
  }

  addCount(){
      this.setState({
          count:this.state.count+1
      })
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log('shouldComponentUpdate  nextProps = ', nextProps);
    console.log('shouldComponentUpdate nextState = ', nextState);

    console.log('shouldComponentUpdate  props = ', this.props);

    return nextProps.name !== this.props.name || nextProps.age !== this.props.age;
}

  render(){
      alert('render 渲染被调用')
    return(
      <div style={{border:'5px solid green',width:'200px',height:'200px'}}>
          {this.props.name}
          {this.state.count}
          <button onClick={e=>this.addCount()}>+</button>
      </div>
    )
  }
  componentDidUpdate(prevProps,prevState,snapshot){
      console.log('componentDidUpdate prevProps= ',prevProps);
      console.log('componentDidUpdate prevState= ',prevState)
        console.log('snapshot 更新结束')
    }
  componentDidMount(){
    alert('componentDidMount 组件已被挂载')
 }
}



export default LifeCpt;